<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>数据运营</title>
</head>

<body>
    <div class="modal">
        <div class="loading">
            <span></span>
        </div>
    </div>
    <div class="head">

    </div>
    <div class="body">
        <div class="left">
            <div class="security-incident-infor">
                <div class="title">
                    <div class="title-text" style="width: 183px;">
                        安全事件信息
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div class="card-left">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                安全事件种类
                            </div>
                        </div>
                        <div id="charts1" class="charts"></div>
                    </div>
                    <img src="./images/line.png">
                    <div class="card-right">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                安全事件趋势
                            </div>
                        </div>
                        <div>
                            <div id="charts2" class="charts"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="work-order-statistics">
                <div class="title">
                    <div class="title-text" style="width: 117px;">
                        工单统计
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div id="charts3" class="charts"></div>
                </div>
            </div>
            <div class="workloadTop-knowledgeTop">
                <div class="workload-top">
                    <div class="title">
                        <div class="title-text" style="width: 186px;">
                            工作量TOP
                        </div>
                        <img src="./images/title.png">
                        <div class="title-line"></div>
                    </div>
                    <div class="charts" id="charts4"></div>
                </div>
                <div class="knowledge-top">
                    <div class="title">
                        <div class="title-text" style="width: 242px;">
                            知识贡献TOP
                        </div>
                        <img src="./images/title.png">
                        <div class="title-line"></div>
                    </div>
                    <div class="charts" id="charts5"></div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="system-infor">
                <div class="title">
                    <div class="title-text" style="width: 183px;">
                        应用系统信息
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div class="card-top">
                        <div class="card-top-left">
                            <div class="card-top-left-title">统建 / 自建</div>
                            <div class="card-top-left-body">
                                <div class="text1">统建</div>
                                <div class="text2">自建</div>
                                <div class="text3" id="tongjCount">0</div>
                                <div class="text4" id="zijCount">0</div>
                            </div>
                        </div>
                        <div class="card-top-center">
                            <div class="card-top-center-title">生产</div>
                            <div class="card-top-center-body">
                                <div class="text1">测试</div>
                                <div class="text2">生产</div>
                                <div class="text3">同城容灾</div>
                                <div class="text4">异地容灾</div>
                                <div class="text5" id="csCount">0</div>
                                <div class="text6" id="scCount">0</div>
                                <div class="text7" id="tczbCount">0</div>
                                <div class="text8" id="ydzbCount">0</div>
                            </div>
                        </div>
                        <div class="card-top-right">
                            <div class="card-top-right-title">等保</div>
                            <div class="card-top-right-body">
                                <div class="text1">一级</div>
                                <div class="text2">二级</div>
                                <div class="text3">三级</div>
                                <div class="text4" id="yijiCount">0</div>
                                <div class="text5" id="erjiCount">0</div>
                                <div class="text6" id="sanjiCount">0</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-bottom">
                        <div class="title1" style="margin-bottom: -20px;">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                应用系统设备数量
                            </div>
                        </div>
                        <div id="charts6" class="charts"></div>
                        <div class="bottom-img">
                            <img src="./images/bottom.png" width="93%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="sla-satisfaction">
                <div class="sla">
                    <div class="title">
                        <div class="title-text" style="width: 134px;">
                            SLA情况
                        </div>
                        <img src="./images/title.png">
                        <div class="title-line"></div>
                    </div>
                    <div class="charts" id="charts7"></div>
                    <div class="total" id="slaTotal">40</div>
                </div>
                <div class="satisfaction">
                    <div class="title">
                        <div class="title-text" style="width: 188px;">
                            服务满意度
                        </div>
                        <img src="./images/title.png">
                        <div class="title-line"></div>
                    </div>
                    <div class="charts" id="charts8"></div>
                    <div class="total" id="satisfactionTotal">50</div>
                </div>
            </div>
            <div class="admit-support">
                <div class="title">
                    <div class="title-text" style="width: 297px;">
                        访问接待与服务支持
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div class="card-left">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                访问接待
                            </div>
                        </div>
                        <div id="charts9" class="charts"></div>
                        <div class="bottom-img">
                            <img src="./images/bottom1.png" width="93%">
                        </div>
                    </div>
                    <img src="./images/line.png">
                    <div class="card-right">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                服务支持
                            </div>
                        </div>
                        <div id="charts10" class="charts"></div>
                        <div class="bottom-img">
                            <img src="./images/bottom1.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="capacity-infor">
                <div class="title">
                    <div class="title-text" style="width: 117px;">
                        容量信息
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div class="card-top">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                机柜容量
                            </div>
                        </div>
                        <div id="charts11" class="charts"></div>
                    </div>
                    <div class="card-left">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                IT电力容量
                            </div>
                        </div>
                        <div id="charts12" class="charts"></div>
                        <div class="bottom-img">
                            <img src="./images/bottom2.png">
                        </div>
                    </div>
                    <img src="./images/line.png">
                    <div class="card-right">
                        <div class="title1">
                            <div class="title1-tag"></div>
                            <div class="title1-text">
                                总电力容量
                            </div>
                        </div>
                        <div>
                            <div id="charts13" class="charts"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pue-infor">
                <div class="title">
                    <div class="title-text" style="width: 114px;">
                        PUE信息
                    </div>
                    <img src="./images/title.png">
                    <div class="title-line"></div>
                </div>
                <div class="card">
                    <div class="left">
                        <div id="charts14" class="charts"></div>
                    </div>
                    <div class="right">
                        <div id="charts15" class="charts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/index-demo.js"></script>
<script src="js/less.js"></script>

</html>